<template>
    
    <div class="default-main ba-table-box" style="">
        <!-- <el-scrollbar v-loading="false" class="ba-table-form-scrollbar" style="height: calc(100vh - 20px)" :native="false"> -->
        <div class="merge-box" style="width: 100%; height: calc(100vh - 30px); overflow: auto;">
            <div style="max-width: 1800px; margin: 0 auto; padding: 10px 10px;">
                <!-- <el-alert class="ba-table-alert" title="产品说明" type="info" show-icon /> -->

                <el-card style="margin-bottom: 20px;" :body-style="{padding: '0 20px'}">
                    <el-collapse model-value="1" accordion>
                        <el-collapse-item name="1">
                            <template #title>
                                <span style="font-size: 14px; font-weight: bold;" v-if="info.product_name">{{ info.product_name }} &nbsp;-&nbsp;&nbsp; </span>
                                <span style="font-size: 14px; font-weight: bold;">{{ t('产品说明') }}</span>
                            </template>
                            <div class="product-info">
                                <el-descriptions direction="vertical" :column="12" size="default" border>
                                    <el-descriptions-item :label="t('产品名')" :span="4">
                                        
                                        <FormItem :input-attr="{ onBlur: loseInfoFocus }" label="" type="string" v-model="info.product_name" style="margin-bottom: 0;" />
                                    </el-descriptions-item>
                                    <el-descriptions-item :label="t('用途')" :span="4">
                                        <FormItem :input-attr="{ onBlur: loseInfoFocus }" label="" type="string" v-model="info.use_to" style="margin-bottom: 0;" />
                                    </el-descriptions-item>
                                    <el-descriptions-item :label="t('月销量')" :span="4">
                                        <FormItem :input-attr="{ onBlur: loseInfoFocus }" label="" type="string" v-model="info.sales" style="margin-bottom: 0;" />
                                    </el-descriptions-item>
                                    <el-descriptions-item :label="t('产品图片')" :span="4">
                                        <div style="float: left;">
                                            <span class="product-images-span" v-for="(item, index) in info.product_images" :key="index" style="position: relative; margin-right: 8px; height: 50px; display: block; float: left;">
                                                <span style="" class="del-image" @click="delProductImage(item)">{{ t('删除') }}</span>
                                                <el-image
                                                    style="width: 50px; height: 50px; border: 1px solid #eee;"
                                                    :src="item"
                                                    :zoom-rate="1.2"
                                                    :preview-src-list="info.product_images"
                                                    :initial-index="index"
                                                    fit="cover" 
                                                    :hide-on-click-modal="true"
                                                />
                                            </span>
                                        </div>
                                        <FormItem label="" type="images" v-model="info.product_images" style="margin-bottom: 0; float: left;" :input-attr="{ hideSelectFile: true, onSuccess: infoUpload, showFileList: false }" />
                                    </el-descriptions-item>
                                    <el-descriptions-item :label="'TDS/MSDS/' + t('其他资料')" :span="4">
                                        
                                        <FormItem label="" type="files" v-model="info.product_files_text" style="margin-bottom: 0; margin-top: 0px;" :input-attr="{ hideSelectFile: true, onSuccess: infoUpload, showFileList: false }" />
                                        <div>
                                            <div class="product-images-span" v-for="(item, index) in info.product_files" :key="index" style="position: relative; margin-right: 8px; display: block; margin-left: 6px;">
                                                <!-- <span style="" class="del-image" @click="delProductImage(item)">删除</span> -->
                                                <el-link :href="item.url" target="_blank">{{ item.name }}</el-link>
                                                <Icon @click="delProductFile(item.url)" name="el-icon-Delete" color="#bd362f" size="15" style="position: relative; top: 5px; left: 10px; cursor: pointer;" />
                                            </div>
                                            <!--  -->
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item :label="t('参考事项')" :span="4" class-name="note-td">
                                        <FormItem label="" type="textarea" v-model="info.note" style="margin-bottom: 0;" :input-attr="{ onBlur: loseInfoFocus, resize: 'none' }" />
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-collapse-item>
                        
                    </el-collapse>
                    
                </el-card>
                
                <el-alert class="ba-table-alert" :title="t('业务报价')" type="info" show-icon />

                <el-card class="box-card">
                    <div style="margin-bottom: 20px;">
                        <span class="mr-5" style="position: relative; top: 5px;">{{ t('显示状态') }}：</span>
                        <span :class="[state.type == -999 ? 'btn btn-info mr-5' : 'btn mr-5']" @click="state.type = -999; load()">{{ t('全部') }}</span>
                        <span :class="[state.type == 0 ? 'btn btn-info mr-5' : 'btn mr-5']" @click="state.type = 0; load()">{{ t('显示') }}</span>
                        <span :class="[state.type == 1 ? 'btn btn-info mr-5' : 'btn mr-5']" @click="state.type = 1; load()">{{ t('隐藏') }}</span>
                        <span class="btn btn-success" style="margin-left: 12px;" @click="add()">{{ t('添加报价') }}</span>
                    </div>
                    <!-- <div style="margin-top: 15px;">
                        <span class="mr-5" style="position: relative; top: -2px; ">业务状态：</span>
                        <span :class="[state.status.length == 0 || state.status == state.allStatus ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="state.status = []">全部</span>
                        <span :class="[state.status.includes(0) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(0)">准备下单</span>
                        <span :class="[state.status.includes(1) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(1)">已下单</span>
                        <span :class="[state.status.includes(2) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(2)">现货</span>
                        <span :class="[state.status.includes(3) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(3)">付款预定</span>
                        <span :class="[state.status.includes(4) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(4)">口头预定</span>
                        <span :class="[state.status.includes(10) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(10)">已提货</span>
                        <span :class="[state.status.includes(5) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(5)">入库</span>
                        <span :class="[state.status.includes(6) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(6)">韩国已发货</span>
                        <span :class="[state.status.includes(7) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(7)">待定</span>
                        <span :class="[state.status.includes(-1) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(-1)">取消订单</span>
                        <span :class="[state.status.includes(8) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(8)">退款</span>
                        <span :class="[state.status.includes(9) ? 'btn mr-5 mb-12 btn-info' : 'btn mr-5 mb-12']" @click="clickStatus(9)">换货</span>
                    </div> -->
                    

                    


                    <!-- 表格顶部菜单 -->
                    <!-- <TableHeader
                        :buttons="['refresh']"
                        :quick-search-placeholder="t('quick Search Placeholder', { fields: t('order.quick Search Fields') })"
                    /> -->
                    <!-- 表格 -->
                    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
                    <div style="margin: 0 -20px;">
                        <Table ref="tableRef" :pagination="false">
                            <template #batch_operate>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column label="更改状态" width="248" align="center">
                                    <template #default="scope" slot-scope="scope">
                                        <div style="height: 195px; vertical-align: middle; display: table-cell; width: 280px;">
                                            <div style="width: 100%;">
                                                <div class="withdraw-box" style="text-align: center; width: 100%; display: block;">
                                                    <div class="btn btn-danger" @click="withdrawStatus(scope.row)">撤回状态</div>
                                                </div>
                                                <div class="operate-btn" style="text-align: center;">

                                                    <!-- 准备下单 -->
                                                    <div v-if="scope.row.status == 0">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 1)">已下单</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                        </span>
                                                    </div>

                                                    <!-- 已下单 -->
                                                    <div v-if="scope.row.status == 1">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 7 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 7)">待定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 4 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 4)">口头预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                        </span>
                                                    </div>

                                                    <!-- 现货 -->
                                                    <div v-if="scope.row.status == 2">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 5 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 5)">入库</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                        </span>
                                                    </div>

                                                    <!-- 入库 -->
                                                    <div v-if="scope.row.status == 5">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                        </span>
                                                    </div>

                                                    <!-- 韩国已发货 -->
                                                    <div v-if="scope.row.status == 6">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                        </span>
                                                    </div>

                                                    <!-- 换货 -->
                                                    <div v-if="scope.row.status == '9-1' || scope.row.status == '9-2' || scope.row.status == '9-3' || scope.row.status == '9-4'">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 10 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 10)">已提货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                        </span>
                                                    </div>

                                                    <!-- 已提货 -->
                                                    <div v-if="scope.row.status == 10">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 5 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 5)">入库</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 6 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 6)">韩国已发货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 9)">换货</span>
                                                        </span>
                                                    </div>

                                                    <!-- 付款预定 -->
                                                    <div v-if="scope.row.status == 3">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 10 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 10)">已提货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 8)">退款</span>
                                                        </span>
                                                    </div>

                                                    <!-- 口头预定 -->
                                                    <div v-if="scope.row.status == 4">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 7 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 7)">待定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                        </span>
                                                    </div>

                                                    <!-- 待定 -->
                                                    <div v-if="scope.row.status == 7">
                                                        <span>
                                                            <span :class="[scope.row.current_status == 2 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 2)">现货</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 3 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 3)">付款预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == 4 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, 4)">口头预定</span>
                                                        </span>
                                                        <span>
                                                            <span :class="[scope.row.current_status == -1 ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, -1)">取消订单</span>
                                                        </span>
                                                    </div>
                                                    
                                                    
                                                </div>
                                                <!-- 现货数量 -->
                                                <div v-if="scope.row.current_status == 2" style="width: 100px; margin: 0 auto 10px auto;">
                                                    <el-input v-model="scope.row.stock_split" :value="[scope.row.stock_split ? scope.row.stock_split : scope.row.num]" placeholder="" type="number" />
                                                </div>
                                                <!-- 入库数量 -->
                                                <div v-if="scope.row.current_status == 5" style="width: 100px; margin: 0 auto 10px auto;">
                                                    <el-input v-model="scope.row.storage_split" :value="[scope.row.storage_split ? scope.row.storage_split : scope.row.num]" placeholder="" type="number" />
                                                </div>
                                                <!-- 韩国已发货数量 -->
                                                <div v-if="scope.row.current_status == 6" style="width: 100px; margin: 0 auto 10px auto;">
                                                    <el-input v-model="scope.row.krw_split" :value="[scope.row.krw_split ? scope.row.krw_split : scope.row.num]" placeholder="" type="number" />
                                                </div>
                                                <!-- 提货数量 -->
                                                <div v-if="scope.row.current_status == 10" style="width: 100px; margin: 0 auto 10px auto;">
                                                    <el-input v-model="scope.row.delivery_split" :value="[scope.row.delivery_split ? scope.row.delivery_split : scope.row.num]" placeholder="" type="number" />
                                                </div>
                                                <!-- 付款预定 天数 数量 -->
                                                <div v-if="scope.row.current_status == 3" style="margin-bottom: 10px;">
                                                    <span style="width: 80px; display: inline-block; margin-right: 5px;">
                                                        <el-input v-model="scope.row.pay_reserve_day_split" placeholder="天数" type="number" />
                                                    </span>
                                                    <span style="width: 80px; display: inline-block;">
                                                        <el-input v-model="scope.row.pay_reserve_num_split" :value="[scope.row.pay_reserve_num_split ? scope.row.pay_reserve_num_split : scope.row.num]" placeholder="数量" type="number" />
                                                    </span>
                                                </div>
                                                <!-- 口头预定 天数 数量 -->
                                                <div v-if="scope.row.current_status == 4" style="margin-bottom: 10px;">
                                                    <span style="width: 80px; display: inline-block; margin-right: 5px;">
                                                        <el-input v-model="scope.row.verbal_reserve_day_split" placeholder="天数" type="number" />
                                                    </span>
                                                    <span style="width: 80px; display: inline-block;">
                                                        <el-input v-model="scope.row.verbal_reserve_num_split" :value="[scope.row.pay_reserve_num_split ? scope.row.pay_reserve_num_split : scope.row.num]" placeholder="数量" type="number" />
                                                    </span>
                                                </div>
                                                <!-- 换货类型 -->
                                                <div v-if="scope.row.current_status == 9 || scope.row.current_status == '9-1' || scope.row.current_status == '9-2' || scope.row.current_status == '9-3' || scope.row.current_status == '9-4'" style="margin-bottom: 10px;">
                                                    <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-1' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-1')">颜色</span>
                                                    <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-2' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-2')">尺码</span>
                                                    <span style="padding: 0 8px;margin-right: 5px;" :class="[scope.row.current_status == '9-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-3')">瑕疵</span>
                                                    <span style="padding: 0 8px;" :class="[scope.row.current_status == '9-4' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '9-4')">款式</span>
                                                </div>
                                                <!-- 退款类型 -->
                                                <div v-if="scope.row.current_status == 8 || scope.row.current_status == '8-1' || scope.row.current_status == '8-2' || scope.row.current_status == '8-3'" style="margin-bottom: 10px;">
                                                    <span style="margin-right: 5px;" :class="[scope.row.current_status == '8-1' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-1')">延迟</span>
                                                    <span style="margin-right: 5px;" :class="[scope.row.current_status == '8-2' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-2')">断货</span>
                                                    <span :class="[scope.row.current_status == '8-3' ? 'btn btn-info' : 'btn']" @click="setShipmentStatus(scope.row, '8-3')">特殊</span>
                                                </div>

                                                <div @click="saveStatus(scope.row, scope.$index)" v-if="scope.row.current_status != null && scope.row.current_status != undefined && scope.row.current_status != -999 && scope.row.current_status != 9" class="btn confirm-btn">
                                                    <div>确定</div>
                                                </div>
                                            </div>
                                            
                                            
                                            
                                        </div>
                                    </template>
                                </el-table-column>
                            </template>
                            <template #note>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column :label="t('备注')" align="center" min-width="300" class-name="note">
                                    <template #default="scope">
                                        <div class="note-box" style="height: 155px; display: grid; grid-template-rows: 120px 32px;">
                                            <div class="note-content-box" style="align-self: flex-start; text-align: left; height: 120px; overflow: auto;">
                                                <div v-for="(item, key) in scope.row.note" :key="key">
                                                    <!-- <span>{{ item.admin.username }}：</span> -->
                                                    <span>{{ item.content }}</span>
                                                    <span style="margin-left: 5px;">
                                                        <el-popconfirm title="确定要删除这个备注吗?" @confirm="delNote(item.id, key, scope.row)">
                                                            <template #reference>
                                                                <Icon name="el-icon-Delete" color="#bd362f" size="15" style="position: relative; top: 2px; cursor: pointer;" />
                                                            </template>
                                                        </el-popconfirm>
                                                        
                                                    </span>
                                                    
                                                </div>
                                            </div>
                                            <div style="align-self: flex-end; height: 32px; text-align: left;">
                                                <el-input v-model="scope.row.new_note" placeholder="" style="width: calc(100% - 55px);" />
                                                <span class="btn" style="width: 50px; margin-left: 5px;" @click="addNote(scope.row.id, scope.row.new_note, scope.row)">提交</span>
                                            </div>
                                        </div>
                                        
                                    </template>
                                </el-table-column>
                            </template>
                            <template #images>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column label="图片" align="center" width="160">
                                    <template #default="scope">
                                        <div style="max-height: 150px; overflow: auto;">
                                            <div v-for="(item, index) in scope.row.images" :key="index">
                                                <el-image
                                                    style="width: 100px;"
                                                    :zoom-rate="1.2"
                                                    :src="item"
                                                    :preview-src-list="scope.row.images"
                                                    fit="cover"
                                                    :preview-teleported="true"
                                                    :initial-index="index"
                                                />
                                            </div>
                                        </div>
                                        
                                        
                                    </template>
                                </el-table-column>
                            </template>
                            <template #tel>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column :label="t('联系方式')" align="center" width="170">
                                    <template #default="scope">
                                        <div style="text-align: left;">
                                            <div v-if="scope.row.mobile">{{ t('手机') }}：{{ scope.row.mobile }}</div>
                                            <div v-if="scope.row.tel">{{ t('电话') }}：{{ scope.row.tel }}</div>
                                            <div v-if="scope.row.wechat">{{ t('微信') }}：{{ scope.row.wechat }}</div>
                                        </div>
                                        
                                    </template>
                                </el-table-column>
                            </template>
                            <template #shipment_status>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column label="出货状态" align="center" width="150" class-name="shipment-status">
                                    <template #default="scope">
                                        <!-- 自定义 -->
                                        <div>
                                            <el-text class="mx-1" size="">
                                                {{ scope.row.status_text }}<span v-if="scope.row.status == 3">{{ scope.row.pay_reserve_day }}天</span><span v-if="scope.row.status == 4">{{ scope.row.verbal_reserve_day }}天</span>
                                            </el-text>
                                        </div>
                                        <div style="margin-top: 5px;">
                                            <span class="btn" v-blur @click="popupShipmentStatus(scope.row.id)">操作记录</span>
                                        </div>
                                    </template>
                                </el-table-column>
                            </template>
                            <template #corporate-name>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column :label="t('公司名称')" align="center">
                                    <template #default="scope">
                                        <!-- 自定义 -->
                                        <a class="corporate-name" target="_blank" style="color: #000; text-decoration: none;" :href="'https://www.qcc.com/web/search?key=' + scope.row.corporate_name + '&searchIndex=%7B%22name%22%3A%22' + scope.row.corporate_name + '%22%7D'">{{ scope.row.corporate_name }}</a>
                                    </template>
                                </el-table-column>
                            </template>
                            <template #quotation_file>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column :label="t('报价单')" align="center" width="120">
                                    <template #default="scope">
                                        <!-- 自定义 -->
                                        <div>
                                            <FormItem :input-attr="{ hideSelectFile: true, onSuccess: uploadQuotationFile(scope.row), showFileList: false }" label="" type="file" v-model="scope.row.quotation_file.url" style="margin-bottom: 0; margin-top: 0px;"  />
                                            <div v-if="scope.row.quotation_file.url">
                                                <el-link :href="scope.row.quotation_file.url" target="_blank" style="font-size: 12.5px;">{{ scope.row.quotation_file.name }}</el-link>
                                                <Icon @click="delQuotationFile(scope.row)" name="el-icon-Delete" color="#bd362f" size="15" style="position: relative; top: 5px; left: 10px; cursor: pointer;" />
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </template>
                            <template #other_files>
                                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                                <el-table-column :label="'TDS/MSDS/' + t('其他资料')" align="center" width="160">
                                    <template #default="scope">
                                        <!-- 自定义 -->
                                        <div>
                                            <FormItem :input-attr="{ hideSelectFile: true, onSuccess: uploadOtherFiles(scope.row), showFileList: false }" label="" type="files" v-model="scope.row.other_files_default" style="margin-bottom: 0; margin-top: 0px;"  />
                                            <div v-if="scope.row.other_files.length > 0">
                                                <div v-for="(item, index) in scope.row.other_files" :key="index">
                                                    <el-link :href="item.url" target="_blank" style="font-size: 12.5px;">{{ item.name }}</el-link>
                                                    <Icon @click="delOtherFile(item.url, scope.row)" name="el-icon-Delete" color="#bd362f" size="15" style="position: relative; top: 5px; left: 10px; cursor: pointer;" />
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </template>
                        </Table>
                    </div>
                    
                    <!-- 表单 -->
                    <PopupForm />
                    
                    
                    
                </el-card>
            </div>
            
        </div>
        <!-- </el-scrollbar> -->
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, markRaw, h, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { uuid } from '/@/utils/random'
import { setTitle } from '/@/utils/common'

import FormItem from '/@/components/formItem/index.vue'

import { useRoute } from 'vue-router'
const route = useRoute()

import { delNoteApi, addNoteApi, hideQuotationApi, showQuotationApi, setInfoApi, setQuotationFileApi, delQuotationFileApi } from '/@/api/most/business/business'
import { setOtherFilesApi } from '/@/api/most/business/quotation'
const state = reactive({
    no: route.params.no,
    corporate_name: '', 
    product_name: '',
    type: 0, // 订单类型
    status: [], // 订单状态
    allStatus: [-999, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    uuid: uuid()
})

// const = 

const info = reactive({
    no: route.params.no,
    product_name: '',
    product_images: [],
    product_files: [],
    product_files_text: [],
    use_to: '',
    sales: '',
    note: ''
})

/**
 * 上传其他文件
 */
const uploadOtherFiles = (row: anyObj) => {
    return (file: anyObj) => {
        console.log(row)
        console.log(file)
        row.other_files.push({
            url: file.data.file.url,
            name: file.data.file.name
        });
        let data = {
            id: row.id,
            other_files: row.other_files
        }
        console.log(row)
        setOtherFilesApi(data).then((e) => { })
    }
}
/**
 * 删除其他文件
 */
const delOtherFile = (url: string, row: anyObj) => {
    console.log(row)
    let other_files = [];
    for(let i = 0; i < row.other_files.length; i++){
        if(url != row.other_files[i].url){
            other_files.push(row.other_files[i])
        }
    }
    row.other_files = other_files;
    let data = {
        id: row.id,
        other_files: row.other_files
    }
    console.log(row)
    setOtherFilesApi(data).then((e) => { })
}

/**
 * 上传报价单
 */
const uploadQuotationFile = (row: anyObj) => {
    return (file: anyObj) => {
        console.log(row)
        console.log(file)
        row.quotation_file.name = file.data.file.name;
        let data = {
            id: row.id,
            quotation_file: {
                url: file.data.file.url,
                name: file.data.file.name
            } 
        }
        setQuotationFileApi(data).then((e) => { })
    }
}
/**
 * 删除报价单
 */
const delQuotationFile = (row: anyObj) => {
    delQuotationFileApi(row.id).then((e) => {
        row.quotation_file.name = null;
        row.quotation_file.url = null;
    })
}

/**
 * 产品说明表单失去焦点触发
 */
const loseInfoFocus = () => {
    setInfoApi(info).then((e) => {})
}

const infoUpload = () => {
    setInfoApi(info).then((e) => {
        info.product_files = e.data.product_files;
        info.product_files_text = e.data.product_files_text;
    })
}

const delProductImage = (value) => {
    info.product_images = info.product_images.filter(item => item != value);
    infoUpload();
}
const delProductFile = (url) => {
    info.product_files_text = info.product_files_text.filter(item => item != url);

    let product_files = [];

    for(let i = 0; i < info.product_files.length; i++){
        if(info.product_files[i].url != url){
            product_files.push(info.product_files[i]);
        }
    }
    info.product_files = product_files;


    infoUpload();
}


const add = () => {
    baTable.onTableHeaderAction('add', {})
}



/**
 * 删除备注
 * @param id 
 * @param key 
 * @param row 
 */
const delNote = (id: number, key: number, row: anyObj) => {
    delNoteApi(id).then((e) => {
        if(e.code == 1){
            row.note.splice(key, 1);
        }
    })
}

/**
 * 添加备注
 * @param order_goods_id 子订单id
 * @param note 备注内容
 */
const addNote = (quotation_id: number, note: string, row: anyObj) => {
    let data = {
        quotation_id: quotation_id,
        content: note
    }
    addNoteApi(data).then((e) => {
        console.log(e);
        if(e.code == 1){
            row.new_note = '';
            row.note.push(e.data)
        }
    })
}



const { t } = useI18n()
const tableRef = ref()
let optButtons = defaultOptButtons([])
// 自定义一个新的按钮
let newButton: OptButton[] = [
    {
        render: 'confirmButton', // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        name: 'edit',
        title: '',
        text: t('显示'),
        type: 'default',
        class: 'btn btn-default ml--6',
        disabledTip: false,
        icon: '',
        display: (row: TableRow, field: TableColumn) => { // 按钮是否显示，请返回布尔值
            return row.hide == 0 ? false : true;
        },
        popconfirm: {
            confirmButtonText: t('显示'),
            cancelButtonText: t('Cancel'),
            confirmButtonType: 'danger',
            title: t('确定要显示该记录吗?'),
        },
        click: (row: TableRow, field: TableColumn) => { // 自定义点击事件
            showQuotationApi(row.id).then((e) => {
                console.log(e)
                if(e.code == 1){
                    row.hide = 0;
                }
            })
        }
    },{
        render: 'confirmButton', // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        name: '',
        title: '',
        text: t('隐藏'),
        type: 'default',
        class: 'btn btn-default ml--6',
        disabledTip: false,
        icon: '',
        popconfirm: {
            confirmButtonText: t('隐藏'),
            cancelButtonText: t('取消'),
            confirmButtonType: t('确认'),
            title: t('确定要隐藏该记录吗?'),
        },
        display: (row: TableRow, field: TableColumn) => { // 按钮是否显示，请返回布尔值
            return row.hide == 1 ? false : true;
        },
        click: (row: TableRow, field: TableColumn) => { // 自定义点击事件
            hideQuotationApi(row.id).then((e) => {
                console.log(e)
                if(e.code == 1){
                    row.hide = 1;
                }
            })
        }
    },{
        render: 'basicButton', // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        name: 'edit',
        title: 'edit',
        text: t('编辑'),
        type: 'primary',
        class: 'btn btn-primary ml-0 mt-8',
        icon: '',
    },{
        render: 'confirmButton',
        name: 'delete',
        title: '',
        text: t('删除'),
        type: 'danger',
        class: 'btn btn-danger ml--6 mt-8',
        icon: '',
        popconfirm: {
            confirmButtonText: t('删除'),
            cancelButtonText: t('取消'),
            confirmButtonType: 'danger',
            title: t('Are you sure to delete the selected record?'),
        }
    }
]

import { index as indexInit } from '/@/api/most'
import { useSiteConfig } from '/@/stores/siteConfig'
import { useSystemInfo } from '/@/stores/systemInfo'
import { useSubstation } from '/@/stores/substation'
import { Console } from 'console'
const siteConfig = useSiteConfig()
const systemInfo = useSystemInfo()
const substation = useSubstation()

// 新按钮合入到默认的按钮数组
optButtons = newButton.concat(optButtons)
const baTable = new baTableClass(
    new baTableApi('/system/business.Quotation/'),
    {
        pk: 'id',
        column: [
            { label: t('公司名称'), prop: 'corporate_name', render: 'slot', slotName: 'corporate-name', align: 'center', sortable: false },
            // { label: t('产品名称'), prop: 'product_name', align: 'center', width: 250, operator: false },
            // { label: t('用途'), prop: 'role', align: 'center', sortable: false },
            // { label: t('价格'), prop: 'id', align: 'center', sortable: false },
            // { label: t('月销量'), prop: 'id', align: 'center', sortable: false },
            // { label: t('图片'), prop: 'id', align: 'center', sortable: false },
            // { label: t('文件'), prop: 'id', align: 'center', sortable: false },
            { label: t('联系方式'), prop: 'id', render: 'slot', slotName: 'tel', align: 'center', width: 130, sortable: false },
            { label: t('报价单'), prop: 'id', align: 'center', sortable: false, render: 'slot', slotName: 'quotation_file' },
            { label: 'TDS/MSDS/' + t('其他资料'), prop: 'id', align: 'center', sortable: false, render: 'slot', slotName: 'other_files' },
            // { label: t('图片'), prop: 'images', render: 'slot', slotName: "images", align: 'center', sortable: false },
            { label: t('备注'), prop: 'note', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false, render: 'slot', slotName: 'note' },
            { label: t('操作'), align: 'center', render: 'buttons', buttons: optButtons, operator: false, width: 100 }
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: { no: state.no },
    },{
        getIndex: () => {
            indexInit().then((res) => {
                siteConfig.dataFill(res.data.siteConfig)
                systemInfo.dataFill(res.data.adminInfo)
                
            })
        }
    },{
        getIndex: ({ res }: { res: ApiResponse }) => {
            if(res.data.info.product_name){
                setTitle(res.data.info.product_name + ' - ' + t('业务报价'))
            }
            
            info.use_to = res.data.info.use_to;
            info.sales = res.data.info.sales;
            info.product_name = res.data.info.product_name;
            info.note = res.data.info.note;
            info.product_images = res.data.info.product_images;
            info.product_files = res.data.info.product_files;
            info.product_files_text = res.data.info.product_files_text;
            
            setTimeout(() => {
                const element = document.querySelector('.note-td'); // 替换 'your-class' 为你想要获取高度的 CSS 类
                const height = element.offsetHeight; // 获取高度
                const textarea = document.querySelector('.product-info .el-textarea__inner'); // 替换 'your-class' 为你想要操作的 CSS 类
                textarea.style.height = height + 'px'; // 设置颜色样式
                textarea.style.minHeight = height + 'px';

                // textarea.style.minHeight = textarea.scrollHeight + 'px'; // 设置新高度
            }, 100);
            
        }
    }
)

provide('baTable', baTable)

const load = () => {
    baTable.table.filter!.state = state;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
}



defineExpose({load});

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.table.filter!.state = state;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})


</script>



<style scoped lang="scss">

.default-main {
    margin-bottom: 20px!important;
}
.product-info :deep(.el-input__wrapper){
    box-shadow: unset;
}

.product-info :deep(.el-textarea__inner){
    box-shadow: unset;
}

.corporate-name:hover{
    color: #409eff!important;
}

.product-info :deep(.el-input__wrapper:hover){
    box-shadow: 0 0 0 1px #c0c4cc inset;
}
.product-info :deep(.el-input__wrapper.is-focus){
    box-shadow: 0 0 0 1px #409eff inset;
}
.product-info :deep(.el-form-item__label){
    padding-right: 0;
}

:deep(.el-upload--picture-card){
    height: 50px;
    width: 50px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item){
    width: 50px;
    height: 50px;
}

:deep(.el-image){
    width: 70px;
    height: unset;
}

.del-image{
    position: absolute; 
    top: 0px; 
    right: 0; 
    z-index: 9; 
    cursor: pointer;
    border: 1px solid #409eff;
    background: #409eff;
    color: #fff;
    width: 50px;
    text-align: center;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
}

.del-image:hover{
    background: #0354a4;
}
 

.operate-btn .span{
    cursor: pointer;
    user-select: none;
}

.operate-btn > div > span{
    margin-bottom: 5px;
    display: inline-block;
    margin: 0px 5px 8px 0px;
}
.confirm-btn > button{

    padding: 12px 50px;
}
:deep(.btn) {
    padding: 0 12px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
}
.withdraw-box{
    margin-bottom: 15px;
}
.mb-12{
    margin-bottom: 12px;
}
.mr-5{
    margin-right: 5px;
}
:deep(.el-form-item__label){
    padding-right: 5px;
}
:deep(.el-table .note.el-table__cell){
    vertical-align: unset;
}

:deep(.ba-table-box .el-scrollbar__bar.is-horizontal){
    display: block!important;
    position: fixed!important;
    height: 16px;
}
:deep(.merge-box .is-horizontal){
    position: fixed;
}
:deep(.splite-record .is-horizontal){
    position: relative;
}
:deep(.splite-record.ba-operate-dialog .el-dialog__body){
    padding-bottom: 0;
}
:deep(.el-scrollbar__bar.is-horizontal){
    height: 16px;
    margin-left: 11.5px;
}
.merge-box::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
    opacity: 0.2;
}
.merge-box::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    opacity: 0.2;
    cursor: pointer;
}
.note-content-box::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
    opacity: 0.2;
}
.note-content-box::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    opacity: 0.2;
    cursor: pointer;
}
:deep(.el-table){
}

:deep(.operate-log-dialog.ba-operate-dialog .el-dialog__body) {
    height: auto;
    padding-top: 0;
    padding-bottom: 20px;
}






:deep(.splite-record){
    // overflow: auto;
}
:deep(.sss){
    height: 100%;
}

:deep(.splite-record .el-scrollbar__bar.is-horizontal){
    // display: block!important;
    // position: fixed;
    bottom: 16px;
    height: 16px;
}
:deep(.splite-record .is-horizontal){
    position: relative;
}
:deep(.splite-record.ba-operate-dialog .el-dialog__body){
    padding-bottom: 0;
}
.splite-record::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
    opacity: 0.2;
}
.splite-record::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    opacity: 0.2;
    height: 28px;
    cursor: pointer;
}
:deep(.mt-8){
    margin-top: 8px;
}
:deep(.ml--6){
    margin-left: -6px!important;
}
:deep(.ml-0){
    margin-left: 0px!important;
}
:deep(.table-operate-text){
    padding-left: 0;
}

</style>
